<template>
	<view>
		<view class="list flex align-center" v-for="(item,index) in list" :key="index" @tap="showResForm(index)">
			<view class="headimg flex align-center">
				<image class="head-img" :src="item.avatar" />
			</view>
			<view class="username">{{item.nickname}}</view>
			<view class="join-time">{{item.createtime_text}}</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				circle_id:0,
				list:[],
				showDetail:false
			}
		},
		onLoad(params) {
			if(params.circle_id)
			{
				this.circle_id = params.circle_id;
				this.getUserList();
			}
			
		},
		methods: {
			showResForm(index){
				if(this.showDetail == false)
				{
					return;
				}
				var info = this.list[index];
				this.$api.navigateTo('/pages/group/group-show-res?join_id='+info.join_id);
			},
			getUserList(){
				var that = this;
				that.$http.post('circle/getCircleUser',{
					circle_id:that.circle_id
				}).then(res=>{
					if(res.code == 1)
					{
						that.list = res.data.list;
						that.showDetail = res.data.showDetail;//是否有更多资料可以查看
					}else{
						that.$api.msg(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.list{
		width: 100%;
		height: 120rpx;
		background: #ffffff;
		margin: 20rpx 0;
		padding: 0 20rpx;
		.headimg{
			height: 100%;
			.head-img{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
		.username{
			font-size: 30rpx;
			color: #333333;
			padding: 0 20rpx;
			width: 400rpx;
			overflow: hidden;
			height: 100%;
			line-height: 120rpx;
			font-weight: 600;
		}
		.join-time{
			font-size: 26rpx;
			color:#999999;
		}
	}
</style>
